h2 {
  font-size: 20px;
}

@media (max-width: 768px) {
  h2 {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  h2 {
    font-size: 16px;
    margin-bottom: 0px;
  }
}

h3 {
  font-size: 16px;
  font-weight:normal;
}

@media (max-width: 768px) {
  h3 {
    font-size: 12px;
    font-weight:normal;
  }
}

@media (max-width: 576px) {
  h3 {
    font-size: 10px;
    font-weight:normal;
    margin-bottom: 0px;
  }
}

.tyle_style {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .tyle_style {
    padding-right: 2px;
    padding-left: 2px;
    margin-bottom: 5px;
  }
}

.tyle_style3 {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .tyle_style3 {
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
  }
}

@media (max-width: 576px) {
  .tyle_style3 {
    padding-right: 0.5px;
    padding-left: 0.5px;
    margin-bottom: 1px;
  }
}

.top-bottom-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.hover-img3 {
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
.hover-img3 .caption {
	font-size:		100%;
	text-align: 		center;
  padding-top:		5px;
	color:			#fff;
}
.hover-img3 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	bottom:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.hover-img3:hover .mask {
	opacity:		1;	/* マスクを表示する */
}